<style type="text/css">

/**
 * Additional styles for the controls.
 */
.jcarousel-control {
    text-align: center;
}

.jcarousel-scroll {
	overflow: hidden;
    text-align: center;
    float: left;
}

.jcarousel-scroll form {
    margin: 0;
    padding: 0;
}

.jcarousel-scroll select {
    font-size: 75%;
}

#mycarousel-next,
#mycarousel-prev {
    cursor: pointer;
    text-decoration: none;
    font-size: 11px;
}

</style>
<script type="text/javascript">
/**
 * We use the initCallback callback
 * to assign functionality to the controls
 */
function mycarousel_initCallback(carousel) {
    jQuery('.jcarousel-control a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
		hasactive = jQuery('.jcarousel-control a').hasClass("act");
		if(hasactive) jQuery('.jcarousel-control a').removeClass("act");
        jQuery(this).addClass("act");
        return false;
    });

    jQuery('.jcarousel-scroll select').bind('change', function() {
        carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
        return false;
    });

    jQuery('#mycarousel-next').bind('click', function() {
       
        carousel.next();
        p = jQuery('a.act').text();
        v=parseInt(p)+1;
        if(v<3){
        jQuery("a#p"+p).removeClass("act");
        jQuery("a#p"+v).addClass("act");
        }
        return false;
    });

    jQuery('#mycarousel-prev').bind('click', function() {
        carousel.prev();
        p = jQuery('a.act').text();
        v=parseInt(p)-1;
        if(v>0){
        jQuery("a#p"+p).removeClass("act");
        jQuery("a#p"+v).addClass("act");
        }
        return false;
    });
};

// Ride the carousel...
jQuery(document).ready(function() {
    jQuery("#mycarousel").jcarousel({
        scroll: 1,
        initCallback: mycarousel_initCallback,
        // This tells jCarousel NOT to autobuild prev/next buttons
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
});

</script>
<div class="navi-scroll">
<div class="jcarousel-scroll">
      <form action="">
        <a style="float: left" href="#" id="mycarousel-prev">&nbsp;</a>
        <select style="display: none;">
          <option value="1">Scroll 1 item per click</option>
          <option value="2">Scroll 2 items per click</option>
          <option value="3">Scroll 3 items per click</option>
          <option value="4">Scroll 4 items per click</option>
          <option value="5">Scroll 5 items per click</option>
        </select>
        <div style="float: left" class="jcarousel-control">
		      <a id="p1" href="#" class="act">1</a>
		      <a id="p2" href="#">2</a>
		</div>
        <a style="float: left" href="#" id="mycarousel-next">&nbsp;</a>
      </form>
    </div>
</div>    
<div class="slider">
	<div id="mycarousel" class="jcarousel-skin-tango">
    <ul>
      <li>
      <div class="hover">&nbsp;</div><img width="156" height="181" src="<?php echo Yii::app()->getBaseUrl();?>/media/slider/img1.jpg" alt="" />
      <div class="info">
      	<p style="font-weight: 700;margin-bottom: 5px;">ĐẾ CHẾ: phuongpro</p>
      	<p>Tướng có râu. Đánh đâu thua đó, nói chung là lởm</p>
      </div>
      <div style="text-align: right;padding-right: 10px;"><a href=""><img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/dt.gif" /></a></div>
      </li>
      <li>
      <div class="hover">&nbsp;</div><img width="156" height="181" src="<?php echo Yii::app()->getBaseUrl();?>/media/slider/img1.jpg" alt="" />
      <div class="info">
      	<p style="font-weight: 700;margin-bottom: 5px;">ĐẾ CHẾ: phuongpro</p>
      	<p>Tướng có râu. Đánh đâu thua đó, nói chung là lởm</p>
      </div>
      <div style="text-align: right;padding-right: 10px;"><a href=""><img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/dt.gif" /></a></div>
      </li>
      <li>
      <div class="hover">&nbsp;</div><img width="156" height="181" src="<?php echo Yii::app()->getBaseUrl();?>/media/slider/img1.jpg" alt="" />
      <div class="info">
      	<p style="font-weight: 700;margin-bottom: 5px;">ĐẾ CHẾ: phuongpro</p>
      	<p>Tướng có râu. Đánh đâu thua đó, nói chung là lởm</p>
      </div>
      <div style="text-align: right;padding-right: 10px;"><a href=""><img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/dt.gif" /></a></div>
      </li>
      <li>
      <div class="hover">&nbsp;</div><img width="156" height="181" src="<?php echo Yii::app()->getBaseUrl();?>/media/slider/img1.jpg" alt="" />
      <div class="info">
      	<p style="font-weight: 700;margin-bottom: 5px;">ĐẾ CHẾ: phuongpro</p>
      	<p>Tướng có râu. Đánh đâu thua đó, nói chung là lởm</p>
      </div>
      <div style="text-align: right;padding-right: 10px;"><a href=""><img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/dt.gif" /></a></div>
      </li>
      <li>
      <div class="hover">&nbsp;</div><img width="156" height="181" src="<?php echo Yii::app()->getBaseUrl();?>/media/slider/img1.jpg" alt="" />
      <div class="info">
      	<p style="font-weight: 700;margin-bottom: 5px;">ĐẾ CHẾ: phuongpro</p>
      	<p>Tướng có râu. Đánh đâu thua đó, nói chung là lởm</p>
      </div>
      <div style="text-align: right;padding-right: 10px;"><a href=""><img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/dt.gif" /></a></div>
      </li>
    </ul>

  </div>
</div>